<template>
	<view class="account">
		<!-- 顶部导航栏 -->
		<view>
			<u-navbar :placeholder="true" leftIcon="" title="个人中心">
				<view slot="right">
					<u-row>
						<u-col :span="6">
							<u-icon name="scan" color="gray" size="20"></u-icon>
						</u-col>
						<u-col :span="6">
							<u-icon name="setting" color="gray" size="20"></u-icon>
						</u-col>
					</u-row>
				</view>
			</u-navbar>
		</view>
		<!-- 个人信息框 -->
		<view>
			<u-row>
				<u-col :span="3">
					<view style="display: flex;justify-content: center;">
						<u-avatar :src="userData.photo"></u-avatar>
					</view>
				</u-col>
				<u-col :span="7">
					<u-row>
						<u-col span="4">
							<u--text :text="userData.userName" :bold="true" size="20" lineHeight="35"></u--text>
						</u-col>
						<u-col span="8">
							<u--text :text="userData.schoolName" color="gray" size="13"></u--text>
						</u-col>
					</u-row>

					<u--text :text="userData.stuCode" size="10"></u--text>
				</u-col>
				<u-col :span="2">
					<view style="text-align: center;">
						<u--text :text="userData.studyNumber" :bold="true" color="#4096ff"></u--text>
						<u--text text="学分" color="gray"></u--text>
					</view>
				</u-col>
			</u-row>
		</view>
		<!-- 钱包信息 -->
		<view style="margin-top: 30upx;">
			<u-grid :border="false">
				<u-grid-item class="yediv">
					<span class="ye">{{ userData.ye1 }}</span>
					<span class="yetitle" >校园卡余额</span>
				</u-grid-item>
				<u-grid-item class="yediv">
					<span class="ye">{{ userData.ye2 }}</span>
					<span class="yetitle">网卡余额</span>
				</u-grid-item>
				<u-grid-item class="yediv">
					<span class="ye">{{ userData.ye3 }}</span>
					<span class="yetitle">水卡余额</span>
				</u-grid-item>
			</u-grid>
		</view>
		
		<!-- 消息中心 -->
		<view style="box-sizing: border-box;margin: 20upx 35upx;padding: 15upx;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);">
			<u-row style="margin-bottom: 20upx;">
				<u--text text="消息中心" :bold="true" size="18"></u--text>
			</u-row>
				<u-grid col="4">
					<u-grid-item>
						<view class="t-icon t-icon-aixin"></view>
						<text class="iconTitle">系统消息</text>
					</u-grid-item>
					<u-grid-item>
						<view class="t-icon t-icon-biaoqian"></view>
						<text class="iconTitle">活动消息</text>
					</u-grid-item>
					<u-grid-item>
						<view class="t-icon t-icon-dushu"></view>
						<text class="iconTitle">校园消息</text>
					</u-grid-item>
					<u-grid-item>
						<view class="t-icon t-icon-guaichiyao"></view>
						<text class="iconTitle">兼职消息</text>
					</u-grid-item>
				</u-grid>
		</view>
		
		<!-- 个人中心 -->
		<view style="box-sizing: border-box;margin: 20upx 35upx;padding: 15upx;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);">
			<u-row style="margin-bottom: 20upx;">
				<u--text text="个人中心" :bold="true" size="18"></u--text>
			</u-row>
				<u-grid col="4">
					<u-grid-item>
						<view class="t-icon t-icon-aixin"></view>
						<text class="iconTitle">系统消息</text>
					</u-grid-item>
					<u-grid-item>
						<view class="t-icon t-icon-biaoqian"></view>
						<text class="iconTitle">活动消息</text>
					</u-grid-item>
					<u-grid-item>
						<view class="t-icon t-icon-dushu"></view>
						<text class="iconTitle">校园消息</text>
					</u-grid-item>
					<u-grid-item>
						<view class="t-icon t-icon-guaichiyao"></view>
						<text class="iconTitle">兼职消息</text>
					</u-grid-item>
					<u-grid-item>
						<view class="t-icon t-icon-aixin"></view>
						<text class="iconTitle">系统消息</text>
					</u-grid-item>
					<u-grid-item>
						<view class="t-icon t-icon-biaoqian"></view>
						<text class="iconTitle">活动消息</text>
					</u-grid-item>
					<u-grid-item>
						<view class="t-icon t-icon-dushu"></view>
						<text class="iconTitle">校园消息</text>
					</u-grid-item>
					<u-grid-item>
						<view class="t-icon t-icon-guaichiyao"></view>
						<text class="iconTitle">兼职消息</text>
					</u-grid-item>
				</u-grid>
		</view>

	</view>
</template>

<script>
	export default {
		name: "account",
		data() {
			return {
				// 个人数据
				userData: {
					photo: "https://tse2-mm.cn.bing.net/th/id/OIP-C.gU9VLi5ON1b7x34NeQ20PgHaG5?w=193&h=180&c=7&r=0&o=5&dpr=1.1&pid=1.7",
					userName: "蔡徐坤",
					schoolName: "河南大学",
					stuCode: "1858588469",
					studyNumber: 64,
					ye1: 500,
					ye2: 600,
					ye3: 800
				}
			}
		},
		methods: {

		}
	}
</script>

<style scoped>
	.ye{
		font-size: 40upx;
		color:#ffaa00;
	} 
	
	.yetitle{
		font-size: 30upx;
		font-weight: 700;
		color:gray;
	} 
</style>